<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue 源码解读</title>
  <style>
    .slide-enter, .slide-leave-to {

    }
    .slide-leave, .slide-enter-to {

    }
    .slide-enter-active {
      animation: slide-in 2s ease-out;
    }
    .slide-leave-active {
      animation: slide-out 2s ease-out;
      /* 这里在离开的时候，需要让这个元素脱离标准流，不然后面的元素动不了 */
      position: absolute;
    }
    /* 想要让动画平滑一点，需要加v-move的类名，v-可以别name的值 */
    .slide-move {
      transition: all 2s;
    }

    @keyframes slide-in {
      from {
        transform: translateY(50px)
      }
      to {
        transform: translateY(0)
      }
    }
    @keyframes slide-out {
      from {
        transform: translateY(0)
      }
      to {
        transform: translateY(50px)
      }
    }
</style>
</head>

<body>
  <div id="app">
    <button @click="addItem">添加数据项</button>
    <ul>
      <transition-group name="slide">
        <li v-for="(item, index) in list" :key="item" @click="removeItem(index)">{{item}}</li>
      </transition-group>
    </ul>
  </div>
  <script src="../dist/vue.js"></script>
  <script>
      var vm = new Vue({
        el: '#app',
        data: {
          list: [1, 2, 3, 4]
        },
        methods: {
          addItem() {
            this.list.push(this.list[this.list.length-1] + 1)
          },
          removeItem(idx) {
            this.list.splice(idx, 1)
          }
        }
      })
  </script>
</body>

</html>
